<template>
  <div class='information' >
    <div class = 'msg_box' v-if='MSG_SEEN'>
      <div class="deatil_msg" >点击内容可查看内容具体详情</div>
    </div>
    <div class='rightsv' v-if='detailSystem'>
      <detailSystem :detailSystemId='moreid' :nodeId='nodeid'></detailSystem>
    </div>
    <div class='leftsv'>
      <div class='tabs'>
        <div class='table_title'>信息系统列表</div>
        <div v-show="$route.query.type!=='readonly'">
          <at-button type='primary' style="float:left; margin-top:10px;position:relative; margin-right:10px;width:110px;height:30px;border-radius:1px; margin-left:20px;" @click="changeDetail()">
            <i class="saas-icon-page-refresh" style="position:absolute;top:5px;left:3px;font-size:20px" ></i>
            <span style='margin-right:-15px'>查看同步信息</span>  
          </at-button>
          <span v-if="num>0" :class="{'doubleNum':num.toString().length === 2, 'singleNum': num.toString().length === 1, 'more': num>99, 'common': true}">  
            <span class="infoCount" v-if="num<=99"> {{num}}</span>  
            <span class="infoCount" v-else>99+</span>
          </span>
          <div class="search_box">
            <div class='searchBox'>
              <at-search class='search_input' project='mh' :placeholder='searchTitle' type="text" v-model='value' icon="search" :on-icon-click="handleIconClick" ></at-search>
            </div>
          </div>
        </div>
        <div class="table_Box">     
          <at-table 
          style="width:100%"  
          :data='tableBox.table'
          @sort-change = "sortChange" 
          @cell-click='RowClick'
          >          
          <at-table-column show-overflow-tooltip label='信息系统名称' prop='ainfo_sys_name' min-width='150px'></at-table-column>
          <at-table-column show-overflow-tooltip label='信息系统描述' prop='ainfo_sys_description' min-width='180px'></at-table-column>
          <at-table-column show-overflow-tooltip label='url地址' prop='aurl'  min-width='150px'></at-table-column>
          <at-table-column show-overflow-tooltip label='信息系统代码' prop='ainfo_sys_code'  min-width='150px'></at-table-column>
          <at-table-column show-overflow-tooltip label='所属机构' prop='bagency_name' min-width='110px' :formatter="formatters"></at-table-column>
          <at-table-column show-overflow-tooltip label='创建时间' prop='ar_time' sortable="custom" min-width='150px'></at-table-column>
          </at-table>     
        </div>
        <div style='text-align:center;padding:20px;padding-bottom:20px;overflow:hidden;'>
          <Pagination 
          :currentPage='tableBox.tableData.pagination.current' 
          :total='tableBox.total'  
          :pageSizes='pageSizes'
          :pageSize='tableBox.tableData.pagination.pageSize'
          @current-change='handleCurrentChange'
          @size-change='handleSizeChange'
          layout='total, sizes, prev, pager, next, jumper'>
          </Pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
// import { Notification } from 'atelement'
// import $http from '../../../../utils/http.js'
import detailSystem from './detailSystem'

export default {
  name: 'informationSystem',
  data () {
    return {
      disabled: true,
      total: '',
      value: '',
      searchTitle: '请输入系统名称',
      currentPage: 1,
      totalpage: 0,
      pageSizes: [20, 40, 60, 80],
      pageSize: 20,
      moreid: '',
      nodeid: '',
      detailSystem: false,
      MSG_SEEN: true
    }
  },
  components: {
    detailSystem
  },
  computed: {
    ...mapState({
      tableBox: state => state.informationSystem.tableBox,
      filters: state => state.informationSystem.filters,
      num: state => state.informationSystem.num
    })
  },
  destroyed () {
    this.$store.commit('informationSystem/CLEAR_DATA')
  },
  watch: {
    $route (to, from) {
      if (to.fullPath.includes('/business/basics/informationSystem')) {
        this.getdata()
        // if (this.$route.query.websiteId) {
        //   this.getwebid()
        // } else {
        //   this.tableBox.tableData.filters.awebsite_id = []
        //   this.getdata()
        // }
      }
    }
  },
  created () {
    this.getdata()
    // if (this.$route.query.websiteId) {
    //   this.detailSystem = false
    //   this.MSG_SEEN = true
    //   this.getwebid()
    // } else {
    //   this.getdata()
    // }
  },
  mounted () {
  },
  methods: {
    // 获取数据
    getdata () {
      this.tableBox.tableData.pagination.current = 1
      this.tableBox.tableData.search.value = ''
      this.$store.dispatch('/informationSystem/ALL_DATA')
    },
    // 分页
    handleCurrentChange (page) {
      this.$store.dispatch('/informationSystem/ALL_DATA', {
        type: 'pagCur',
        page: page
      })
    },
    //  改变每一页条数
    handleSizeChange (pageSizes) {
      this.$store.dispatch('/informationSystem/ALL_DATA', {
        type: 'pagSize',
        pageSizes: pageSizes
      })
    },
    //  搜索
    handleIconClick () {
      this.$store.dispatch('/informationSystem/ALL_DATA', {
        type: 'search',
        value: this.value,
        currentPage: this.currentPage
      })
    },
    // 排序
    sortChange ({ column, prop, order }) {
      if (order !== null) {
      } else {
        prop = 'acreate_time'
        order = 'ascending'
      }
      this.$store.dispatch('/informationSystem/ALL_DATA', {
        type: 'sorter',
        key: prop,
        value: order.slice(0, -3)
      })
    },
    // 传参过滤
    // getwebid () {
    //   if (this.$route.query.websiteId !== undefined) {
    //     this.$store.dispatch('/informationSystem/ALL_DATA', {
    //       type: 'fifid',
    //       'websiteId': this.$route.query.websiteId.split(',')
    //     })
    //   } else {
    //     this.tableBox.tableData.filters.awebsite_id = []
    //     this.getdata()
    //   }
    // },
    // 详情跳转
    RowClick (row) {
      this.moreid = row.ainfo_sys_id
      this.nodeid = row.bagency_id
      this.MSG_SEEN = false
      this.detailSystem = true
    },
    // 变更详情点击
    changeDetail () {
      this.$router.push('/business/basics/informationSystem/antoSystem')
    },
    formatters (row) {
      if (row.bagency_name === null || row.bagency_name === '默认节点') {
        return '-'
      } else {
        return row.bagency_name
      }
    }
  }
}
</script>
<style lang='less'>
 .information {
  .at-table__body-wrapper {
    overflow: hidden;
  }
  .leftsv {
    background:#fff;
    margin-right:496px;
    border-top:none;
    border-right:solid 1px #eee;
  }
  .deatil_msg {
    float:left;
    margin-top:15px;
    padding-left:20px
  }
  .rightsv {
    width:478px;
    float:right;
    border:1px solid #eeeeee;
    border-top:none;
  }
  .msg_box {
    min-width:478px;
    float:right;
    border:1px solid #eeeeee;
    border-top:none;
    background: #ffffff;
    height:50px;
  }
  // .contain {
  //   background:#ffffff;
  //   border-top:none
  // }
  // .button_add {
  //   float:left; 
  //   margin-top:10px; 
  //   margin-right:10px;
  //   width:84px;
  //   height:30px;
  //   border-radius:1px;
  //   margin-left:20px
  // }
  // .more_num {
  //   line-height:17px;
  //   color:#fff;
  //   border-radius:50%;
  //   width:16px;
  //   height:16px;
  //   display:inline-block;
  //   background:#fd4e55;
  //   margin-left:4px;
  // }
  .search_box {
    float:right; 
    margin-top:10px; 
  }
  .search_input {
    margin-right:20px;
  }
  .at-input .at-input__inner {
    border: 1px solid #eee;
    height: 30px;
    width: 100%;
    background: #fff;
    border-radius: 2px;
    color: #8992a7;
    font-size: 12px;
}
  .search_button {
    background-color:#1F92EF;
    color:#FFFFFF;
    margin-left:-7px;
    height:30px;
    margin-right:20px;
  }
  .table_Box {
    margin-left:20px;
    margin-right:20px;
  }
  .tabs {
    margin-bottom:20px;
  }
  .table_title {
    color:#5c6781;
    font-size:14px;
    height:50px;
    border-bottom:1px solid #eeeeee;
    padding-left:20px;
    line-height:50px;
    font-weight:bold;
  }
  .doubleNum {
  width: 25px;
  margin-top: 4px;
  border-radius: 8.5px;
  }
  .singleNum {
    width: 17px;
    border-radius: 50%;
    top: -15px;
    position: relative;
    left: -14px;
  }
  .more {
    width: 32px;
    border-radius: 8.5px;
  }
  .common {
    font-weight: bold;
    background: #1f92ef;
    display: inline-block;
    height: 17px;
    position: relative;
    left: -18px;
    top: -8px;
  }
  .infoCount {
    display: block;
    color: #FFFFFF;
    height: 102px;
    line-height: 0px;
    text-align: center;
    font-size : 12px;
    -webkit-transform: scale(0.84,0.84);
    *font-size:10px;
  }
}
</style>
